<template>
    <div>
        <input type="text" v-model="state.Pname">
        <input type="button" value="查询" @click="showmember" />
        <table border="">
            <tr>
                <td>名称</td>
                <td>编号</td>
                <td>级别</td>
                <td>方案</td>
                <td>消费下限</td>
                <td>消费上限</td>
                <td>时间</td>
            </tr>
            <tr v-for="item in list">
                <td>{{ item.pname}}</td>
                <td>{{ item.pbianhao}}</td>
                <td>{{ item.pjibie }}</td>
                <td>{{ item.pfangan }}</td>
                <td>{{ item.pjinexia}}</td>
                <td>{{ item.pjines}}</td>
                <td>{{ item.pdate.substr(0,10) }}</td>
              
            </tr>
        </table>
        <a>
            当前{{ state.index }}页 每页显示{{ state.size }}条 共{{ pcount }}页共{{ count }}条
            <input type="button" value="首页" @click="fenye(0)" />
            <input type="button" value="上一页" @click="fenye(-1)" />
            <input type="button" value="下一页" @click="fenye(1)" />
            <input type="button" value="尾页" @click="fenye(9)" />
        </a>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
const route = useRoute()
const router = useRouter()
const data:any = reactive({
    state: {
        Pname: '',
        index: 1,
        size: 2,
    },
    list: [],
    count: 0,
    pcount: 0,

})

const { state, list, count, pcount } = toRefs(data)

onMounted(() => {
    showmember()
})

const showmember = () => {

    
axios({
    url: 'https://localhost:7284/api/Proper/ShowProper',
    method: 'get',
    params: state.value
}).then((res) => {
    console.log(res)
    list.value = res.data.data
    data.count = res.data.count
    data.pcount = res.data.pcount
})
}

const fenye = (num: number) => {
if(num==0)
{
state.value.index=1
}
if(num==-1||num==1)
{
if(num==-1&&state.value.index==1)
{
    return
}
if(num==1&&state.value.index==pcount.value)
{
    return
}
state.value.index+=num
}
if(num==9)
{
    state.value.index=pcount.value
}
showmember()

}


</script>

<style scoped></style>